该文章最后更新于2024-05-01 14:05，某些内容具有时效性，若有错误或已失效，请谅解！
该文章功能依托于《Simple Local Avatars》插件运行，请先安装插件。
插件安装完成后，添加功能代码！
以Puock主题为列，找到用户中心页面模板。
wordpress-theme-puock/inc/classes/PuockUserCenter.php
在register_basic_menus中添加以下代码
self::$menus['avatars'] = [
'title' => __('修改头像', PUOCK),
'subtitle' => __('自定义上传头像', PUOCK),
'call' => array(__CLASS__, 'ailcc_avatars'),
];然后再在下方添加以下代码即可。
public static function ailcc_avatars()
{
wp_enqueue_script( 'jcrop', '/wp-includes/js/jcrop/jquery.Jcrop.min.js', array( 'jquery' ), '0.9.13', true );
wp_enqueue_style( 'jcrop', '/wp-includes/js/jcrop/jquery.Jcrop.min.css', array(), '0.9.13' );
global $current_user;
get_currentuserinfo();
?>
<div class="block-content">
<div class="entry-content">
<h3>修改头像</h3>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">当前头像</label>
<div class="col-sm-10">
<?php
add_filter( 'pre_option_avatar_rating', '__return_null' ); // ignore ratings here
echo wp_kses_post( get_simple_local_avatar( $current_user->ID ) );
remove_filter( 'pre_option_avatar_rating', '__return_null' );
?>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label">上传头像</label>
<div class="col-sm-10">
<form id="avatar-form" method="post" enctype="multipart/form-data">
<input type="file" name="simple-local-avatar" id="simple-local-avatar" class="form-control mb-3">
<input type="hidden" name="action" value="simple_local_avatar_upload" />
<?php wp_nonce_field( 'simple_local_avatar_nonce', '_simple_local_avatar_nonce', false ); ?>
<div id="avatar-preview"></div>
<input type="hidden" name="x">
<input type="hidden" name="y">
<input type="hidden" name="width">
<input type="hidden" name="height">
<input type="submit" id="uploadBtn" value="更新头像" style="display: none;">
</form>
</div>
</div>
<script>
jQuery(function($) {
var preview = $('#avatar-preview'); // 预览区域
var input = $('#simple-local-avatar'); // 上传字段
input.on('change', function() { // 初始化Jcrop
var file = this.files[0];
if (file) {
var img = new Image(); // 创建一个新的图片对象
img.onload = function() {
var actualW = img.width;
var actualH = img.height;
if (actualW < 92 || actualH < 92) {
layer.msg('头像长宽尺寸不能小于92像素', {icon: 5});
window.setTimeout(function () {
window.location.reload();
},500)
}else{
$('#uploadBtn').show();
preview.empty().append(img);// 将图片添加到预览区域中
$(img).Jcrop({ // 初始化Jcrop
aspectRatio: 1,
onSelect: function(c) { // 更新隐藏字段的值
if(c.w < 92 || c.h < 92){
layer.msg('裁剪头像尺寸不能小于94像素', {icon: 5});
}else{
var jcropX = c.x; // 获取 jcrop 裁剪后的坐标
var jcropY = c.y;
var jcropW = c.w;
var jcropH = c.h;
console.log('jcrop 裁剪后的坐标：(' + jcropX + ', ' + jcropY + ', ' + jcropW + ', ' + jcropH + ')');
var wpX = Math.round(jcropX * actualW / $(img).width()); // 计算 jcrop 裁剪后的坐标在 WordPress 编辑器中的坐标
var wpY = Math.round(jcropY * actualH / $(img).height());
var wpW = Math.round(jcropW * actualW / $(img).width());
var wpH = Math.round(jcropH * actualH / $(img).height());
console.log('WordPress 编辑器的坐标：(' + wpX + ', ' + wpY + ', ' + wpW + ', ' + wpH + ')');
console.log('图片的尺寸：(' + actualW + ', ' + actualH + ')');
$('input[name="x"]').val(wpX); // 更新隐藏字段的值
$('input[name="y"]').val(wpY);
$('input[name="width"]').val(wpW);
$('input[name="height"]').val(wpH);
}
}
});
}
};
var reader = new FileReader(); // 加载图片
reader.onload = function(e) {
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
});
});
</script>
<?php
if(!empty( $_FILES['simple-local-avatar']['name'] )){//判断文件框是否为空
if ( isset( $_POST['action'] ) && 'simple_local_avatar_upload' == $_POST['action'] ) {
if ( ! wp_verify_nonce( $_POST['_simple_local_avatar_nonce'], 'simple_local_avatar_nonce' ) ) {
die( 'Security check' );
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {// 将图像保存到文件
$upload_dir = wp_upload_dir();
$filename = $_FILES['simple-local-avatar']['name'];
$filetype = $_FILES['simple-local-avatar']['type'];
$tmp_name = $_FILES['simple-local-avatar']['tmp_name'];
$extension = pathinfo($filename, PATHINFO_EXTENSION); //获取文件扩展名
$new_filename = uniqid() . '.' . $extension; // 生成新的文件名
$file_path = $upload_dir['basedir'].'/avatars/'.$current_user->ID.'-'. $new_filename; //重命名文件及获取地址
move_uploaded_file($tmp_name, $file_path);
$jcropW = intval($_POST['width']); // 获取计算后的值
$jcropH = intval($_POST['height']);
$jcropX = intval($_POST['x']);
$jcropY = intval($_POST['y']);
$image = wp_get_image_editor($file_path); //裁剪图片
$image->crop($jcropX, $jcropY, $jcropW, $jcropH);
$image->save($file_path); //保存图片
$meta_value['blog_id'] = get_current_blog_id(); //拼接字符
$meta_value['full'] = $file_path; //拼接字符
if ( $file_path && ! isset( $file_path['error'] ) ) { // 更新用户头像
update_user_meta( $current_user->ID, 'simple_local_avatar', $meta_value ); //入库
update_user_meta( $current_user->ID, 'simple_local_avatar_rating', 'G' ); //将图片强制评级为适合任何年龄的访客查看
if ($_SERVER['REQUEST_METHOD'] === 'POST') { // 刷新当前页面
?>
<script>window.location.href=window.location.href;</script>
<?php
}
} else {
echo $avatar_url['error'];
}
}
}
}
}
以下代码可以删除，上传时已经随机生成文件名。
考虑到wordpress图片上传不会重命名的情况，假如图片名称中有中文，不确定能否正常引用，所以建议将图片名称重命名。
在主题的functions.php文件尾部加入以下代码即可自动重命名。
function custom_upload_filter( $file ){
$info = pathinfo($file['name']);
$ext = $info['extension'];
$filedate = date('YmdHis').rand(10,99);//为了避免时间重复，再加一段2位的随机数
$file['name'] = $filedate.'.'.$ext;
return $file;
}
add_filter('wp_handle_upload_prefilter', 'custom_upload_filter' );
共计37人点赞，其中5人来自小程序
正文完
微信扫码打开小程序体验更多功能
